/* Copyright Tvb Network Inc 18.04.2020 In Tvb Network All right reserved  */
/* this is the main style about loging user on named: AddlogInModule.css */

:root{
	--TvbBaseColor:#1E90FF;
	--TvbFontUIBold:segoe ui semibold;
	--TvbFontUILight:segoe ui light;
	--TvbFontUIBlack:segoe ui black;
	--TvbNormalFont:font-family:"Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
	--TvbIFont:"SF Pro KR","SF Pro Text","SF Pro Icons","Apple Gothic","HY Gulim","MalgunGothic","HY Dotum","Lexi Gulim","Helvetica Neue","Helvetica","Arial",sans-serif;
	--TvbMinFont:8pt;
	--TvbSIfont:SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
	--TvbNormalFont:10pt;
	--TvbBigFont:12;
	--TvbLargeBigFont:15pt;
	--TvbIXFont:"Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
	--TvbChtContNameSize:17px;	/* le nom qui represente le proprietaire du chat */
	--TvbChtMesShor:13px;


	/* pour le couleur de base */
	--blackColor_1:#0E181F;
    --blackColor_2:#090F13;
	--blackColor_3:#1A2D3B;
	
	
	--Tvb1RToWhite:#f1f1f1;
	--PtCur:pointer;
	--TvbAxBlack:#2B4F62;
	--TvbFxBlack:#254354;
	--TvbFxBlackF1:#254354aa;
	--TvbWhite:#fff;
	--TvbSUIBlack:"segoe ui black";
	--TvbSUISBold:"segoe ui semibold";
	--TvbFormBcColor:#3F728D;
	--TvbBntDisabled:#a1a1a1;
	
	--color2:#d1d1d1;

}



/* Define CSS variables for light mode */
[data-theme="light"] {
	--_lgBxView_BGColor:#b1b1b1;
	--color2:#555;
}


/* Dark mode variables */
[data-theme="dark"] {
	--_lgBxView_BGColor:#2B4F62;
	--color2:#d1d1d1;
}



/* here we have to create some customize font */
@font-face {
  font-family:UISBlack;
  src: url("segoe_ui_bl.ttf");
}

@font-face {
	src: url("segoe_ui.ttf");
	font-family:UISBold;
}

@font-face {
  font-family:UISLight;
  src: url("segoe_ui_sml.ttf");
}





/* this is the line that contains edit object about loging in and siging up */
.areaContEdcc{
	width:80%;
	margin-left:10%;
	height:40px;
	display:flex;
	margin-top:5%;
	position:relative;
	color:var(--Tvb1RToWhite);
	font-family:var(--TvbSUISBold);
	border:1px solid #d1d1d150;
	border-radius:10px;
}





/* this is the line that contains edit object about loging in and siging up */
.areaContEd{
	width:80%;
	height:40px;
	display:flex;
	margin-top:5%;
	margin-left:10%;
	position:relative;
	color:var(--Tvb1RToWhite);
	font-family:var(--TvbSUISBold);
	border-radius:5px;
	background-color:#2B4F62;
}


/*-----------------------pour la zone permettant a l'utilisateur de se connecter-----------------*/
.areabasicView{
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.55); /* Transparent version of #FC9B02 */
	/* border-radius: 10px 10px 10px 10px; /* Rounded corners */
	/* backdrop-filter: blur(10px); /* iPhone-like blur effect */
	
	position:fixed;
	left:0px;
	top:0px;
	opacity:0;
	visibility:hidden;
	z-index:3;
	transition:0.5s linear;
	overflow:hidden;
}


/* Custom scrollbar for WebKit browsers */
.areabasicView::-webkit-scrollbar {
    width: 1px;
}

.areabasicView::-webkit-scrollbar-track {
    background: #d1d1d120;
}

.areabasicView::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 6px;
    border: 3px solid #f1f1f1;
}

.areabasicView::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}


/* pour le button qui est destinne a sign in with apple-google-twitter */
.bntSignInWith{
	width:92%;
	color:#f1f1f1;
	font-family:UISBold,var(--TvbSUISBold);
	text-align:left;
	margin-bottom:15px;
	font-size:14pt;
	display:block;
	padding:4%;
	padding-top:0%;
	text-shadow:0 0 1px #fff;
}

/* this erea will  */
.areamView{
	width:80%;
	height:85%;
	padding:10%;
	padding-top:5%;
	background-color:#000000;
	
	background:url('..\\UIView\\Ind Icon\\AI_Dance_Hero_Desktop.png') #0E181Fbb;
    background-size: cover;
    background-position: bottom bottom;
    background-repeat: no-repeat;
	background-attachment: fixed;
	
	position:absolute;
	left:0px;
	top:0px;
	opacity:0;
	color:var(--TvbWhite);
	visibility:hidden;
	z-index:5;
	transition:0.5s linear;
	display:flex;
	align-items:center;
}



/* the box inside of the last confirmation */
.InareamView{
	position:fixed;
	left:30%;
	top:5%;
	height:80%;
	width:36%;
	padding:2%;
	box-shadow:0px 0px 10px #00000020;
	border-radius:5px;
	background-color:var(--blackColor_1);
	background: rgba(0, 0, 0, 0.65); /* Transparent version of #FC9B02 */
	border-radius: 10px 10px 10px 10px; /* Rounded corners */
	backdrop-filter: blur(10px); /* iPhone-like blur effect */
	border:1px solid #a1a1a1;
	text-align:left;
	overflow-y:auto;
}

/* Custom scrollbar for WebKit browsers */
.InareamView::-webkit-scrollbar {
    width: 1px;
}

.InareamView::-webkit-scrollbar-track {
    background: #d1d1d110;
}

.InareamView::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 6px;
    border: 3px solid #000;
}

.InareamView::-webkit-scrollbar-thumb:hover {
    background-color: #00;
}



._frm_on_{
	text-align:center;
	margin-top:65px;
	margin-bottom:50px;
}



/* la zone qui est destinne a contenir les formulaires de base pour permettre a une personne
	se connecter
*/


/*----------------------------POUR LA CREATION D'UN COMPTE-------------------------*/
.titCreatAccount{
	padding:10px;
	padding-left:20px;
	height:auto;
	margin-bottom:0px;
	display:flex;
	font-family:var(--TvbSUIBlack),UISBlack;
	font-size:18pt;
	color:#d1d1d1;
	text-align:left;
}

.titCreatAccount1{
	padding:10px;
	padding-left:0px;
	height:auto;
	margin-bottom:0px;
	display:flex;
	font-family:var(--TvbSUIBlack),UISBlack;
	font-size:18pt;
	color:#d1d1d1;
	text-align:left;
}

._crtAn2_{
	height:auto;
	margin-bottom:0px;
	font-family:var(--TvbSUIBlack),UISBlack;
	color:#e9e9e970;
	margin-left:auto;
	display:none;
}


._crtAn1_{
	font-family:var(--TvbSUIBlack),UISBlack;
	font-size:20pt;
	color:#e9e9e9;
	margin-left:2%;
}


._icLgnx_{
	width:30px;
	height:30px;
	margin-top:3px;
}


._icLgnx1_{
	display:none;
}


/* this is the area that will contain the view */
._bx_cracc_{
	width:100%;
	min-height:30px;
	overflow: hidden;
	transition: height 0.2s ease-in-out;
}


._lnoncont_{
	padding:10px;
	width:calc(100% - 20px);
	color:#f0f0f0;
	margin-top:15px;
	margin-bottom:0px;
	cursor:pointer;
	background-color:#7AABC550;
}


._lnoncontx_{
	padding:10px;
	padding-left:50px;
	width:calc(100% - 60px);
	color:#f0f0f0;
	margin-top:1px;
	margin-bottom:0px;
	cursor:pointer;
	background-color:#ffffff10;
	font-size:10pt;
}

/* pour la zone se trouvant au desus pour qui est l'icon pour la selection du type d'account */
.icoOnOpenSgWith{
	width:30px;
	height:30px;
	cursor:pointer;
	float:right;
	margin-top:-7px;
}




/* l'icon qui va montrer le field selectionner */
.iconOnLineObject{
	width:30px;
	height:30px;
	margin:5px;
	outline:none;
	position:absolute;
	top:0px;
	
}


/* pour la zone d'enregistrement des informations email */
.areaOfEditEmAdd{
	width:100%;
	height:40px;
	outline:none;
	padding-left:50px;
	background-color:transparent;
	border:0px double;
	font-size:10pt;
	color:var(--Tvb1RToWhite);
	display:inline-block;
	font-family:var(--TvbFontUIBold);
	
}


.frmAtSt{
	width:100%;
	height:100%;
	border-radius:10px;
	background-color:#00000020;
}


/* pour la zone d'enregistrement des informations de mot de pass */
.areaOfEditEmAddPass{
	width:calc(100% - 50px);
	padding-left:40px;
	height:40px;
	outline:none;
	border:0px double;
	font-size:9pt;
	color:var(--Tvb1RToWhite);
	display:inline-block;
	font-family:var(--TvbFontUIBold);	
	background-color:transparent;
	border-radius:10px;
}



/* this is a box that will help user to have access to (forget password) */
.bxFPass{
	padding:14px;
	cursor:pointer;
	font-size:10pt;
}




/* this is the box that will help the user to keep signing in */
.bxKeepSin{
	width:22px;
	height:22px;
	border:2px solid #80ffffff;
	cursor:pointer;
	margin:12px;
	vertical-align:-12px;
	border-radius:50%;
}


/* the small box inside keep signin button  */
.bxKeepSinAct{
	width:14px;
	height:14px;
	margin:4px;
	background-color:#80ffffff;
	border-radius:50%;
}

.bxCint{
	padding-top:13px
}



.areaOfEditEmAdd::-webkit-input-placeholder{ color:var(--TvbWhite); } .areaOfEditEmAdd::placeholder{ color:var(--TvbWhite); }
.areaOfEditEmAddPass::-webkit-input-placeholder{ color:var(--TvbWhite); } .areaOfEditEmAdd::placeholder{ color:var(--TvbWhite); }




/* pour le button permettant de passe a l'etape suivamt */
.bntNextStep{
	margin-top:10%;
	color:#d1d1d1;
	font-family:UISBlack,var(--TvbSUIBlack),sans-serif;
	text-align:center;
	background-color:var(--TvbAxBlack);
	cursor:pointer;
	display:flex;
	align-items:center;
	border:0px solid;
	outline:none;
	padding:10px;
	width:40%;
	margin-left:auto;
	margin-right:auto;
	border-radius:5px;
	text-align:center;
	transition:0.3s ease-in-out;
}

._txtgonxtSp_{
	color:#d1d1d1;
	width:calc(100% - 25px);
	text-align:center;
}


._gonxtSp_{
	width:20px;
	height:20px;
	margin:2px;
}



/* the box that content the main view */
.CoverBxLoadOnLg{
	position:absolute;
	z-index:1;
	width:94%;
	height:95%;
	padding:2%;
	top:0px;
	left:0px;
	margin:1%;
	transition:0.3s ease-in-out;
	display:flex;
	align-items:center;
	border-radius:10px;
	background: rgba(0, 0, 2, 0.8); /* Transparent version of #FC9B02 */
    border: 1px solid rgba(252, 155, 2, 0.2); /* Light border with #FC9B02 */
	backdrop-filter: blur(10px); /* iPhone-like blur effect */
	opacity:0;
	display:none;
}



/* this is the box that will contain the input form */
._bxCntInmp_{
	width:100%;
	text-align:center;
	float:center;
	padding:auto;
}




/* this box will help to show the progression of the log in request */
.BxLoadOnLg{
	text-align:center;
	display:block;
	background-color:var(--blackColor_1);
	padding:5px;
	margin-top:30%;
	transition:0.3s ease-in-out;
	margin-left:auto;
	margin-right:auto;
	
}



@keyframes load{
	from{ transform:rotate(0deg); }to { transform:rotate(360deg); }
}

/* this will indetifier the current progression */
.ldInlgon{
	width:22px;
	height:22px;
	border:2px solid #80ffffff;
	cursor:pointer;
	margin:6px;
	vertical-align:-20px;
	border-radius:50%;
	border-bottom-color:transparent;
	display:inline-block;
	animation:load 0.5s linear infinite;
}


/* the text that come after the loading */
.ldInlgonTxt{
	display:inline-block;
	font-family:var(--TvbSUISBold),sans-serif;
	font-size:12pt;
	color:#a1a1a1;
	margin-right:12px;
}



@keyframes rtl{
	from{ transform:rotate(0deg); }to { transform:rotate(360deg); }
	
}

@keyframes blinkBox{
	10%{ box-shadow:0px 0px 10px #fff; }
	20%{ box-shadow:0px 0px 10px #000; }
	40%{ box-shadow:0px 0px 10px #fff; }
	60%{ box-shadow:0px 0px 10px #000; }
	80%{ box-shadow:0px 0px 10px #000; }
	100%{ box-shadow:0px 0px 10px #000; }
}

/* pour la progression du fist step de base */
.prOnStep{
	width:30px;
	height:30px;
	border:3px solid;
	border-color:var(--TvbWhite);
	border-bottom-color:transparent;
	margin-right:20px;
	border-radius:50%;
	animation:rtl 0.8s linear 0.8s infinite;
}



/* this style will help to show the progression of information while initializing user on net */
.ptOnStep1End{
	width:18px;
	height:18px;
	border:3px solid;
	border-color:var(--TvbWhite);
	border-bottom-color:transparent;
	margin-right:15px;
	border-radius:50%;
	vertical-align:-8px;
	display:inline-block;
	animation:rtl 0.5s linear 0.8s infinite;
}

/* the text after progression */
.InPrTxt{
	display:inline-block;
	padding-top:auto;
	padding-bottom:auto;
	padding-right:20px;
}



/* this is the area whitch will allow us to have access to provide extra ui for users when it comes to insert user name */
.AreaOfConfirmAcc{
	position:absolute;
	width:40%;
	min-height:40px;
	height:auto;
	left:8%;
	bottom:0px;
	padding:10px;
	min-width:340px;
	z-index:4;
	background-color:var(--blackColor_1);
	transition:0.4s ease-in-out;
	opacity:0;
	visibility:hidden;
	font-family:var(--TvbSUISBold),sans-serif;
	font-size:12pt;
	color:#a1a1a1;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:5px;
	border:1px solid #555;
	box-shadow:0 0 5px #555;
}




/* this is a box that will cover the mainview */
.AreaOfConfirmACover{
	position:absolute;
	top:0px;
	width:100%;
	height:100%;
	background-color:#000000bb;
	left:-100%;
	z-index:1;
	visibility:hidden;
	opacity:0;
}




/* box of suggestion user name */
._bxSug_{
	width:100%;
	min-height:0px;
	height:auto;
	margin-bottom:10%;
	cursor:pointer;
	color:#d0d0d0;
	font-size:10pt;
}


/* line of edit */
._lnOdssg_{
	width:calc(100% - 66px);
	padding:8px;
	color:#d1d1d1;
	border:0px solid #d1d1d150;
	border-bottom-width:1px;
	transition:0.3s ease-in-out;
	background-color:#000;
	font-size:9pt;
	padding-left:50px;
}


._lnOdssg_:hover{
	background-color:#FC9E04;
}




._bxOnLadCc_{
	position:absolute;
	left:calc((100% - 350px) / 2);
	top:calc((100% - 200px) / 2);
	display:flex;
	align-items:center;
	justify-content:center;
	width:350px;
	height:200px;
	background: rgba(0, 0, 0, 0.55); /* Transparent version of #FC9B02 */
	border-radius: 10px 10px 10px 10px; /* Rounded corners */
	backdrop-filter: blur(100px); /* iPhone-like blur effect */
	border-radius:10px;
	color:#d1d1d1;
}




/* the main base area which contains all the object bollow */
.contObjctIn2{
	width:94%;
	height:94%;
	padding:3%;
	outline:none;
}



/* this will line will contain edituser name field */
.lnEdtUsrNm{
	background-color:var(--blackColor_1);
	border-radius:5px;
	padding-left:10px;
}




@-webkit-keyframes typing { from { width: 0; } }

/* this icon will show that the user have to edit is name */
.icoEditOn{
	display:inline-block;
	width:40px;
	height:40px;
	vertical-align:-13px;
}


/* area for the edition of user name */
.edAreaUsrName{
	width:calc(100% - 50px);
	height:50px;
	background-color:inherit;
	color:var(--TvbWhite);
	border:0px solid;
	outline:none;
	font-family:var(--TvbFontUIBold);
	font-size:11pt;
	padding-left:5px;
	display:inline-block;
}

.edAreaUsrName::-webkit-input-placeholder{ color:var(--TvbWhite); } .edAreaUsrName::placeholder{ color:var(--TvbWhite); }



/* the cancelation button */
.bntCancel{
	font-family:var(--TvbFontUIBlack);
	font-size:10pt;
	color:var(--TvbWhite);
	float:left;
	text-transform:uppercase;
	cursor:pointer;
	background-color:var(--TvbAxBlack);
	border:0px solid;
	outline:none;
	text-decoration:none;
	padding:12px;
	border-radius:5px;
}


/* the button for the next step  */
.nxtBntOnEdUsName{
	width:auto;
	font-family:var(--TvbFontUIBlack);
	font-size:10pt;
	color:var(--TvbWhite);
	float:right;
	text-transform:uppercase;
	cursor:pointer;
	background-color:var(--TvbAxBlack);
	border:0px solid;
	outline:none;
	text-decoration:none;
	padding:8px;
	padding-right:20px;
	border-radius:5px;
}



._kem_{
	width:30px;
	height:30px;
	margin:10px;
	display:inline-block;
}





/*-----------------we will create a style for the confirmation code */
.rsConfAccount{
	/* this is for title */
	font-family:var(--TvbFontUIBold);
	font-size:12pt;
	text-align:justify;
	width:calc(100% - 10px);
	padding:5px;
	min-height:40px;
	height:auto;
	border:1px solid #444;
	position:relative;
	display:block;
}



/* this will contain the check box */
._chkpp_{
	width:25px;
	height:25px;
	display:inline-block;
	background-color:#d1d1d1;
	margin-right:5px;
	cursor:pointer;
	outline:none;
	margin-top:auto;
	margin-bottom:auto;
}

._chkpp_:checked {
    background-color: blue; /* Replace with your desired background color */
}


._std_mes0_{
	font-family:var(--TvbSUISBold);
	font-size:10pt;
	display:inline-block;
	width:calc(100% - 40px);
	color:#d0d0d0;
}




/* resend icon */
.rsdIco{
	width:30px;
	height:30px;
	display:inline-block;
	vertical-align:-10px;
}



/* area of data */
.arIdinfo{
	width:100%;
	color:var(--TvbWhite);
	font-family:var(--TvbFontUILight);
	font-size:22pt;
	text-align:center;
}



/* area of data */
.arIdinfox{
	width:95%;
	color:#d1d1d1;
	font-family:var(--TvbFontUIBold);
	font-size:25pt;
	text-align:center;

}



._std_mes_{
	width:100%;
	color:#d1d1d1;
	font-family:var(--TvbFontUIBold);
	font-size:13pt;
	margin-top:5px;
	margin-bottom:30px;
	text-align:center;
	display:block;
	float:center;
}





._usrPcc_{
	width:120px;
	height:120px;
	border-radius:50%;
	background-color:#000;
	text-align:center;
	margin-bottom:25px;
}



._cnt_cnf_{
	background-color:var(--blackColor_2);
	border:1px solid #777;
	width:100%;
	height:50px;
	display:flex;
	justify-content:center;
	align-items:center;
}



/* the main edit password for confirmation */
.editConfPAss{
	min-width:calc(100% - 120px);
	height:30px;
	padding:20px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:5px;
	border:0px solid;
	outline:none;
	color:var(--TvbWhite);
	font-family:var(--TvbFontUIBold);
	font-size:12pt;
	background-color:inherit;
	display:inline-block;
	text-align:left;
	
}

.editConfPAss::-webkit-input-placeholder{ color:#d1d1d1; } .editConfPAss::placeholder{ color:#d1d1d1; }

/* the next button to finish */
.nextBntonFin{
	cursor:pointer;
	display:inline-block;
	background-color:inherit;
	float:right;
	height:30px;
	margin:10px;
}


.inpInEdit::-webkit-input-placeholder{ color:var(--Tvb1RToWhite); } .inpInEdit::placeholder{ color:var(--Tvb1RToWhite); }



/* the back button */
.backBntOnFin{
	font-family:var(--TvbFontUIBlack);
	font-size:12pt;
	display:inline-block;
	cursor:pointer;
	background-color:var(--TvbAxBlack);
	padding:10px;
	min-width:50px;
	text-align:center;
	border-radius:5px;
	margin-left:20px;
	margin-right:20px;
}





._cntBtmIco_{
	left:0px;
	bottom:20px;
	width:100%;
}


._cntBtmIcox_{
	display:flex;
	justify-content:center;
	width:100%;
}




/* icon on view */
._icoServ_{
	width:50px;
	height:50px;
	margin:10px;
}






/* here we create the service that will be selected */
.selSrvOnv{
	width:100%;
	height:90px;
	display:block;
	margin-top:5%;
	position:relative;
	background-color:var(--TvbAxBlack);
	color:var(--Tvb1RToWhite);
	font-family:var(--TvbSUISBold);
}





._srv_selctr_{
	padding:1%;
	width:98%;
	color:#d1d1d1;
	font-family:var(--TvbSUISBold);
	display:block;
}







._lnOfSrv_{
	display:block;
	width:100%;
	height:auto;
}





/* la zone qui est destinne a contenir les formulaires de base pour permettre a une personne
	se connecter
*/
.areOfFormIn{
	position:absolute;
	width:31%;
	padding:2%;
	min-width:400px;
	height:96%;
	right:-40%;
	top:0px;
	box-shadow:0px 0px 5px #00000070;
	background-color:var(--blackColor_3);
	transition:0.4s ease-in-out;
}




._txtOnMes_{
	color:#d1d1d1;
	margin-bottom:20px;
	width:100%;
}



/* this erea will help to display the auto user */
._araddAutUn_{
	width:100%;
	height:auto;
	min-height:70px;
	background-color:#00000050;
}






/* here we have to create the langue module */
._lgBxView_{
	width:400px;
	min-height:300px;
	height:auto;
	background-color:var(--_lgBxView_BGColor);
	position:absolute;
	left:calc((100% - 400px) / 2);
	top:calc((100% - 100px) / 2);
	box-shadow:0 0 3px #d1d1d1;
	border-radius:10px;
}





/*here we create a text for the top*/
._txtTpOnv10_{
	font-family:UISBold,var(--TvbSUISBold),UISBold,sans-serif;
	font-size:16pt;
	color:var(--color2);
	padding:20px;
	padding-bottom:10px;
	padding-top:10px;
}



/* top language line */
._tpLgln_{
	padding: 10px;
    width: calc(100% - 20px);
    color: #d1d1d1;
    cursor: pointer;
    background-color: #000;
    display: flex;
    text-align: left;
    border-radius: 10px 10px 0px 0px;
}


._MdLgln_{
	padding: 10px;
    width: calc(100% - 20px);
    color: #d1d1d1;
    cursor: pointer;
    background-color: #000;
    display: flex;
    text-align: left;
	border: 0px solid #555;
    border-top-width: 1px;
}


/* bottom */
._btLgln_{
    padding: 10px;
    width: calc(100% - 20px);
    color: #d1d1d1;
    cursor: pointer;
    background-color: #000;
    display: flex;
    text-align: left;
    border: 0px solid #555;
    border-top-width: 1px;
    border-radius: 0px 0px 10px 10px;
}



._crtDivstyl_{
	width: 86%;
    padding: 2%;
    min-height: 80px;
    height: auto;
    margin: 5%;
    background-color: #2f2f2f;
    border-radius: 10px;
}



/* this is the close language button */
._cls_on_sell_{
	position:absolute;
	top:15px;
	right:25px;
	width:22px;
	height:22px;
	cursor:pointer;
}



._txt_sell_slt_{
	display:inline-block;
	font-size:13pt;
	color:var(--color1);
	font-family:UISBold,var(--TvbSUISBold),UISBold,sans-serif;
	padding:20px;
	padding-top:0px;
	padding-bottom:0px;
}


/* line of suggest */
._lnsuss_{
	width:150px;
	text-align:center;
	padding:8px;
	cursor:pointer;
	color:#d1d1d1;
	background-color:#000;
	margin:5px;
	margin-top:10px;
}












/*-----------------tablet style------------*/
@media screen and (max-width: 769px) {

	._crtAn1_{
		font-size:18pt;
	}
	
	
	._icLgnx_{
		width:30px;
		height:30px;
		margin-top:2px;
	}
	
	
	/* this is the line that contains edit object about loging in and siging up */
	.areaContEd{
		width:90%;
		height:40px;
		display:flex;
		margin-top:5%;
		margin-left:5%;
		position:relative;
		color:var(--Tvb1RToWhite);
		font-family:var(--TvbSUISBold);
		border-radius:10px;
		background-color:#2B4F62;
	}
	
	/* pour le button qui est destinne a sign in with apple-google-twitter */
	.bntSignInWith{
		font-size:12pt;
	}
		
}












/*----------------------mobile style---------------------*/
@media screen and (max-width: 480px) {
		
	._txt_sell_slt_{
		font-size:12pt;
	}

	/*here we create a text for the top*/
	._txtTpOnv10_{
		font-size:14pt;
	}


	/* here we have to create the langue module */
	._lgBxView_{
		width:96%;
		min-height:290px;
		height:auto;
		background-color:var(--_lgBxView_BGColor);
		position:absolute;
		left:2%;
		border-radius:10px;
		top:unset;
		padding-bottom:20;
		bottom:20px;
	}
	
	
	.titCreatAccount{
		padding:10px;
		padding-bottom:5px;
		font-size:16pt;
		padding-bottom:5px;
	}

	
	
	/* this is the area whitch will allow us to have access to provide extra ui for users when it comes to insert user name */
	.AreaOfConfirmAcc{
		position:absolute;
		width:90%;
		min-height:40px;
		height:auto;
		left:2%;
	}
	
	
	._crtAn1_{
		font-size:14pt;
	}
	
	._icLgnx1_{
		width:25px;
		height:25px;
		margin-top:3px;
		display:inline-block;
	}
	
	._icLgnx_{
		width:24px;
		height:24px;
		margin-top:2px;
	}

	/* for the hidden module */
	._crtAn2_{
		display:flex;
		padding-top:4px;
		font-size:12pt;
	}
	
	
	
	.areOfFormIn{
		position:absolute;
		width:96%;
		padding:2%;
		min-width:100px;
		height:auto;
		min-height:300px;
		bottom:-40%;
		top:auto;
		bottom:0px;
		box-shadow:0px 0px 5px #555;
		background-color:#000;
		transition:0.2s ease-in-out;
	}
	
	
	
	
	.InareamView{
		left:0%;
		top:0%;
		width:96%;
		height:98%;
		text-align:left;
		border:0px;
	}
	
	
	
	
	/* pour le button permettant de passe a l'etape suivamt */
	.bntNextStep{
		margin-top:10%;
		color:white;
		font-family:var(--TvbSUIBlack);
		text-align:center;
		padding:8px;
		margin-bottom:10px;
		float:center;
	}
	
	
	
	
	/* this is the line that contains edit object about loging in and siging up */
	.areaContEd{
		all:unset;
		width:96%;
		height:40px;
		display:flex;
		margin-bottom:10%;
		position:relative;
		color:var(--Tvb1RToWhite);
		font-family:var(--TvbSUISBold);
		margin-top:5%;
		margin-left:2%;
		border-radius:10px;
		background-color:#2B4F62;
		
	}
	
	.areaContEdcc{
		width:96%;
		margin-left:2%;
		border-radius:10px;
		height:40px;
		display:flex;
		margin-top:5%;
		position:relative;
		background-color:var(--TvbAxBlack);
		color:var(--Tvb1RToWhite);
		font-family:var(--TvbSUISBold);
		
	}
	
	
	
	/* pour le button qui est destinne a sign in with apple-google-twitter */
	.bntSignInWith{
		font-size:12pt;
	}
		
}